body{
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #0c0c0c;
}
label {
  position: relative;
  width: 80px;
  height: 80px;
  cursor: pointer;
  border-radius: 50%;
}
label .btn {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #1b1b1b;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 1),
    inset 0 -2px 5px rgba(0, 0, 0, 1),
    inset 0 2px 2px rgba(255, 255, 255, .5),
        0 0 0 2px #000,     
        0 0 0 5px #0c0c0c,
        0 0 0 5.5px #080808;
}
label input[type=checkbox]:checked~.btn {
  box-shadow: 0 0 0 rgba(0, 0, 0, 1),
    inset 0 -2px 5px rgba(0, 0, 0, 1),
    inset 0 1px 1px rgba(255, 255, 255, .5),
      0 0 0 2px #000,
      0 0 0 5px #0c0c0c,
      0 0 0 5.5px #080808;
}
label input[type=checkbox] {
  -webkit-appearance: none;
}
label i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 24px !important;
  color: #0c0c0c;
}

label input[type=checkbox]:checked~i {
  color: #00ffe7;
  text-shadow: 0 0 15px #00a1ff,0 0 30px #00a1ff;
}
